<template>
  <el-container>
    <!--左侧-->
    <el-aside width="200px">
      <img src="../assets/loginBox.svg">
      <p class="imgTitle">欢迎使用动力云客系统</p>
    </el-aside>

    <!--右侧-->
    <el-main>
      <div class="loginTile">欢迎登录</div>

      <el-form ref="loginRefForm" :model="user" label-width="100px" :rules="loginRules">
        <el-form-item label="账号" prop="loginAct">
          <el-input v-model="user.loginAct" />
        </el-form-item>

        <el-form-item label="密码" prop="loginPwd">
          <el-input type="password" v-model="user.loginPwd" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="login">登 录</el-button>
        </el-form-item>

        <el-form-item>
          <el-checkbox label="下次自动登录" v-model="user.rememberMe"/>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
import {doGet, doPost} from "../http/httpRequest.js";
import {getTokenName, massageTip, removeToken} from "../utils/util.js";

export default {
  name: "LoginView",
  data(){
    return {
      user:{},
      // 定义表单的验证规则
      loginRules:{
        // 定义账号的验证规则
        loginAct:[
          { required: true, message: '请输入账号', trigger: 'blur' },
        ],
        // 定义密码的验证规则
        loginPwd:[
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 12, message: '密码长度6-12', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.freeLogin();
  },
  methods:{
    // 登录函数
    login(){
      // 提交前验证输入框是否合法
      this.$refs.loginRefForm.validate((isValid)=>{
        // 验证成功
        if(isValid){
          let formData = new FormData();
          formData.append("loginAct",this.user.loginAct)
          formData.append("loginPwd",this.user.loginPwd)
          formData.append("rememberMe",this.user.rememberMe)

          doPost("/api/login",formData).then((resp)=>{
            if (resp.data.code===200){
              // 登录成功，提示一下
              massageTip("登录成功","success")
              removeToken();
              // 前端存储JWT
              if (this.user.rememberMe===true){
                window.localStorage.setItem(getTokenName(),resp.data.data)
              }else {
                window.sessionStorage.setItem(getTokenName(),resp.data.data)
              }
              // 跳转到主页面
              window.location.href="/dashboard"
            }else {
              // 登录失败，提示一下
              massageTip("登录失败","error")
            }
          })
        }
      })
    },

    // 免登录：如果有Token值，直接登录即可，不需要再登录
    freeLogin(){
      let token = window.localStorage.getItem(getTokenName());
      if (token){
        doGet('/api/login/free',{}).then((resp)=>{
          if (resp.data.code===200){
            window.location.href='/dashboard'
          }
        })
        }
      }
    }
}
</script>

<style scoped>
.el-aside {
  background: #1a1a1a;
  width: 40%;
  text-align: center;
}
.el-main {
  height: calc(100vh);
}
img {
  height: 413px;
}
.imgTitle {
  color: white;
  font-size: 28px;
}
.el-form {
  width: 50%;
  margin: auto;
}
.loginTile {
  text-align: center;
  margin-top: 200px;
  margin-bottom: 25px;
  font-weight: bold;
}
.el-button {
  width: 100%;
}
</style>